<?php

use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use website\helpers\Render;
use common\models\User;
use common\models\Design;
use common\models\Category;
use common\models\UserUpload;

$this->addCrumbs('个人设置');
$this->title = '个人资料';
?>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'information']) ?>

    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form">
                <div class="data-mind">
                    <p>注意：图片上传之后不能删除，只能通过覆盖的形式替换</p>
                    <p>　　　个人资料只能填写一次。填写完毕之后，如需修改，请联系客服</p>
                    <p>　　　个人资料填写完毕之后，我们的客服会在最短的时间内与您取得联系，请保持联系方式畅通</p>
                </div>
                <form class="mt-20px" id="flyer-create" enctype="multipart/form-data" onsubmit="return false;">
                    <div class="form-item checker">
                        <div class="input-title">昵称：</div>
                        <div class="input-inline"><input class="flyer-input" name="nickname" type="text" value="<?= $user->nickname ?>"></div>
                        <div class="input-inline input-mid cl-red">*</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">姓名：</div>
                        <div class="input-inline"><input class="flyer-input" name="realname" type="text" value="<?= $user->realname ?>"></div>
                        <div class="input-inline input-mid cl-red w-380px">* 请输入完整的真实姓名</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">身份证：</div>
                        <div class="input-inline"><input class="flyer-input" name="id_number" type="text" value="<?= $user->id_number ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">现居住地：</div>
                        <div class="input-block"><input class="flyer-input" name="address" type="text" value="<?= $user->address ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">性别：</div>
                        <div class="input-inline checker gender clear">
                            <input name="gender" value="1" type="radio" flyer="radio" title="男">
                            <input name="gender" value="2" type="radio" flyer="radio" title="女" checked>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">出生年月：</div>
                        <div class="input-inline"><input class="flyer-input flyer-date" name="birthday" type="text" value="<?= $user->birthday ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">邮箱：</div>
                        <div class="input-inline"><input class="flyer-input" name="email" type="text" value="<?= $user->email ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">支付宝：</div>
                        <div class="input-inline"><input class="flyer-input" name="alipay" type="text" value="<?= $user->alipay ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">微信：</div>
                        <div class="input-inline"><input class="flyer-input" name="wechat" type="text" value="<?= $user->wechat ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">QQ：</div>
                        <div class="input-inline"><input class="flyer-input" name="qq" type="text" value="<?= $user->qq ?>"></div>
                    </div>
                    <?php if( ! $user->information()) { ?>
<!--                        <div class="form-item checker">-->
<!--                            <div class="input-title">验证码：</div>-->
<!--                            <div class="input-inline"><input class="flyer-input" name="captcha" type="text"></div>-->
<!--                            <div class="input-inline"><button class="flyer-button normal border-round narrow" id="get-captcha" type="button">获取验证码</button></div>-->
<!--                        </div>-->
                        <div class="form-item checker">
                            <div class="input-title"></div>
                            <div class="input-inline"><button class="flyer-button normal border-round" id="save-button" type="submit">保 存</button></div>
                        </div>
                        <textarea id="flyer-create-json" data-form="#flyer-create" style="display:none;"><?= User::checker('employer-information') ?></textarea>
                        <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
                    <?php } ?>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<!-- 上传图片类 -->
<link href="<?= Render::static('uploader/loader.css') ?>" rel="stylesheet">
<script src="<?= Render::static('uploader/loader.core.single.class.js') ?>"></script>
<script src="<?= Render::static('uploader/loader.preview.class.js') ?>"></script>
<script>
    var checkerClass = new checker();
    $(document).ready(function() {
        // 性别选择
        $('input[name=gender][value=<?= $user->gender ?>]').click();
        // 表单美化
        (new flyer).init({ form: '#flyer-create' });

        <?php if($user->information()) { ?>
        $('#flyer-create').find('input, textarea').attr('disabled', true);
        return true;
        <?php } ?>
        // 表单数据验证
        checkerClass.init({ ruleDom: '#flyer-create-json' });

        // 发送验证码操作
        tableHandler.requestSingle({
            button: '#get-captcha', isConfirm: false, isShadow: false,
            url: "<?= Url::to('@web/user/captcha-mobile') ?>",
            beforeRequest: function(param) {
                param.data = { type: 'user-information' };
                $('#get-captcha').attr('disabled', true);
            },
            requestFail: function(param) {
                $('#get-captcha').removeAttr('disabled');
            },
            requestSuccess: function (param) {
                var seconds = 60;
                var timer = setInterval(function() {
                    if(--seconds > 0) {
                        $('#get-captcha').text(seconds + '秒后重试');
                    }
                    else {
                        $('#get-captcha').text('重新发送');
                        $('#get-captcha').removeAttr('disabled');
                        clearInterval(timer);
                    }
                }, 1000);
            }
        });

        $('#save-button').bind('click', function() {
            if(checkerClass.validate()) {

                $('#save-button').attr('disabled', true).html('保存中');
                $.ajax({
                    url: "<?= Url::to('@web/employer/information') ?>",
                    cache: false,
                    data: new FormData($('#flyer-create')[0]),
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    success: function(response) {
                        if(response.code == 200) {
                            layer.alert('资料保存成功', { icon: 6 }, function() {
                                window.location.href = "<?= Url::to('@web/employer/information') ?>";
                            });
                        }
                        $('#save-button').removeAttr('disabled').html('保存');
                    }
                });
            }
        });
    });
</script>